Add F114: Failure Technique for Focus Indicators Obscured by Semi-Opaque Overlays

Resolving for #3203

Problem

WCAG 2.2 Understanding document for SC 2.4.11 Focus Not Obscured (Minimum) mentions that semi-opaque overlays can reduce focus indicator visibility, but only describes the problem informally. There was no dedicated Failure Technique (F114) that auditors could reference when testing SC 1.4.11 Non-text Contrast failures where focus indicators are dimmed by overlays.

Solution

Created F114 failure technique with comprehensive testing guidance and a working example that demonstrates the issue.

Changes Made

New Files:

• techniques/failures/F114.html - Complete failure technique documentation
• working-examples/css-focus-obscured-overlay/index.html - Interactive working example

Modified Files:

• understanding/understanding.11tydata.js - Added F114 to SC 1.4.11 failure techniques list

F114 Technique Includes:

• Clear applicability criteria for semi-transparent overlays
• Detailed description of the failure condition
• Practical examples with CSS code
• Step-by-step testing procedure
• Expected results criteria
• Related techniques (C40, G195)

Working Example Features:

• Form with focusable controls demonstrating normal focus indicators
• Semi-transparent overlay (70% opacity) triggered by button
• Clear instructions for testing the failure
• Responsive design following WCAG project patterns
• Refactored CSS for maintainability (simplified form layout, consolidated button styles)

Testing

The working example allows auditors to:

1. Observe normal focus indicators
2. Activate overlay to see contrast reduction
3. Verify focus indicators become difficult to perceive
4. Test with color contrast analyzers

Impact

Provides auditors with a formal reference (F114) for citing SC 1.4.11 failures when focus indicators are obscured by semi-opaque overlays, filling the identified gap in WCAG testing guidance.